<template>
  <el-card class="box-card">
    <breadcrumb :naviItems.sync="naviItems"></breadcrumb>
    <div v-if="showTable">
      <div class="table">
        <div class="container">
          <el-table v-loading="loading" :data="tableData" max-height="800" style="width: 100%" >
            <el-table-column fixed prop="ItemId" label="序号" width="120"> </el-table-column>
            <el-table-column prop="SydwName" label="使用单位" width="200">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  style="text-decoration: underline; color: #606266"
                  @click="gotoDetail(scope.row.Id)"
                  >{{ scope.row.SydwName }}</el-button
                >
              </template>
            </el-table-column>
            <el-table-column prop="Address" label="单位地址" width="250"> </el-table-column>
            <el-table-column prop="Manager" label="联系人" width="150"> </el-table-column>
            <el-table-column prop="Telphone" label="联系电话" width="200"> </el-table-column>
            <el-table-column prop="GasCount" label="设备总量" width="100"> </el-table-column>
            <el-table-column prop="CheckPrediction" label="检验报告" width="100"> </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="page">
        <div class="container">
          <el-pagination
            background
            @size-change="pageSizeChange"
            @current-change="pageChange"
            :current-page="currentPage"
            :page-sizes="[10, 15, 20, 40]"
            :page-size="args.num"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>

    <div v-if="showDetail">
      <div class="detail-container">
        <div class="text-cards">
          <div class="text-card">
            <span class="yello">气瓶总量</span>
            <span class="yello">{{ detailData.GasCount }}</span>
          </div>
          <div class="text-card">
            <span class="red">近一个月需要报检</span>
            <span class="red">{{ detailData.CheckInMonthCount }}</span>
          </div>
          <div class="text-card">
            <span class="red">充装次数≥100次</span>
            <span class="red">{{ detailData.RecordGT100 }}</span>
          </div>
          <div class="text-card">
            <span class="red">使用时间≥12年</span>
            <span class="red">{{ detailData.UseGT12Years }}</span>
          </div>
        </div>
        <div class="charts">
          <div class="chart">
            <div id="gas-type" style="min-width: 400px; height: 400px"></div>
          </div>
          <div class="chart">
            <div id="gas-media" style="min-width: 400px; height: 400px"></div>
          </div>
          <div class="chart">
            <div id="gas-record" style="min-width: 700px; height: 400px"></div>
          </div>
        </div>
        <div class="table">
          <div class="container">
            <el-table v-loading="SydwGasListLoading" :data="SydwGasListTableData" height="400" style="width: 100%">
              <el-table-column fixed prop="Id" label="序号" width="110"> </el-table-column>
              <el-table-column prop="GasId" label="设备代码" width="110"> </el-table-column>
              <el-table-column prop="InneId" label="单位内编号" width="110"> </el-table-column>
              <el-table-column prop="GasType" label="气瓶品种" width="110"> </el-table-column>
              <el-table-column prop="Media" label="充装介质" width="110"> </el-table-column>
              <el-table-column prop="MakeCom" label="制造单位" width="110"> </el-table-column>
              <el-table-column prop="MakeDate" label="制造年月" width="110"> </el-table-column>
              <el-table-column prop="CheckUnit" label="检验单位" width="110"> </el-table-column>
              <el-table-column prop="CheckDate" label="检验日期" width="110"> </el-table-column>
              <el-table-column prop="CheckResult" label="检验结果" width="110"> </el-table-column>
              <el-table-column prop="NextCheckDate" label="下次检验日期" width="110"> </el-table-column>
              <el-table-column prop="CheckCircle" label="检验周期" width="110"> </el-table-column>
              <el-table-column prop="RecordUnit" label="充装单位" width="110"> </el-table-column>
              <el-table-column prop="RecordCount" label="充装次数" width="110"> </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="page">
          <div class="container">
            <el-pagination
              background
              @size-change="pageSizeChange"
              @current-change="pageChange"
              :current-page="SydwGasListCurrentPage"
              :page-sizes="[10, 15, 20, 40]"
              :page-size="SydwGasListSearchArgs.num"
              layout="total, sizes, prev, pager, next, jumper"
              :total="SydwGasListTotal"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
import Breadcrumb from "../../../../components/QipingBreadCrumb/BreadCrumb.vue";
import {
  SydwListSearchArgs,
  serachSydwList,
  searchSydwDetail,
  searchSydwName,
  SydwGasListSearchArgs,
  searchSydwGasList,
} from '../../../../api/qiping/data-service'
// import Highcharts from 'highcharts/highstock'
import Highcharts from 'highcharts/highstock'
export default {
  data() {
    return {
      loading: true,
      tableData: [],
      total: 0,
      currentPage: 1,
      SydwGasListLoading: true,
      SydwGasListTableData: [],
      SydwGasListTotal: 0,
      SydwGasListCurrentPage: 1,
      SydwId: 0,
      SydwName: '',
      args: new SydwListSearchArgs(),
      SydwGasListSearchArgs: new SydwGasListSearchArgs(),
      naviBasicItems: [{ text: '气瓶' }, { text: '云服用户', to: '/qiping/dataService/sydw' }],
      naviItems: [],
      showTable: true,
      showDetail: false,
      detailData: {},
      gasTypeChart: null,
      mediaChart: null,
      recordChart:null,
    }
  },
  async created() {
    if (!this.$route.params.SydwId) {
      console.log('不带SydwId')
      // url不带SydwId,进入表格界面
      // 表格界面的一些参数的初始化
      this.naviItems = [...this.naviBasicItems]
      this.showTable = true
      this.showDetail = false
      this.args.offset = 0
      this.args.num = 10
      this.searchData()
    } else {
      // url带SydwId，进入SydwId对应的详情界面
      // 详情界面的一些参数的初始化
      // 集成到当前项目后由于vue-admin-template的一些特性，一级菜单重定向时不能识别路由参数，故在此重新重定向一次
      if (this.$route.params.SydwId == ":SydwId") {
        this.$router.replace({
          name: "qiping-dataService-sydw",
        });
      }
      this.SydwId = this.$route.params.SydwId
      await this.searchSydwNameData()
      this.naviItems = [
        ...this.naviBasicItems,
        { text: this.SydwName, to: '/qiping/dataService/sydw' + '/' + this.$route.params.SydwId, color: 'red' },
      ]
      this.showTable = false
      this.showDetail = true
      await this.searchDetailData();
      await this.searchGasData()
    }
  },
  components: {
    Breadcrumb,
  },
  methods: {
    // 获取使用单位列表数据
    async searchData() {
      this.loading = true
      const res = await serachSydwList(this.args)
      this.loading = false
      const { list, total } = res.data
      this.total = total
      this.tableData = list
    },
    async searchGasData() {
      this.SydwGasListLoading = true;
      this.SydwGasListSearchArgs.SydwId=this.SydwId;
      const res = await searchSydwGasList(this.SydwGasListSearchArgs)
      this.SydwGasListLoading = false
      const { list, total } = res.data
      for(const item of list){
        item.CheckCircle= Math.round(
          (new Date(item.NextCheckDate) - new Date(item.CheckDate)) / (1000 * 3600 * 24 * 365)
        ) + '年'
      }
      this.SydwGasListTotal = total
      this.SydwGasListTableData = list
    },
    // 获取使用单位名称
    async searchSydwNameData() {
      this.SydwName = (await searchSydwName(this.SydwId)).data
    },

    //获取使用单位详细数据
    async searchDetailData() {
      this.detailData = (await searchSydwDetail(this.SydwId)).data
      this.setGasTypeChart(this.detailData.GasTypeInfo)
      this.setMediaChart(this.detailData.MediaInfo)
      console.log('充装数据:', this.detailData.GasRecordInfo)
      this.setRecordChart(this.detailData.GasRecordInfo)
    },
    gotoDetail(SydwId) {
      console.log('要了解的sydw是:', SydwId)
      this.$router.replace({
        name: 'reload',
        params: {
          to: '/qiping/dataService/sydw/' + SydwId,
        },
      })
    },
    // 页面大小改变
    async pageSizeChange(pageSize) {
      if (this.showTable) {
        this.args.num = pageSize
        this.args.offset = 0
        this.searchData()
      } else if (this.showDetail) {
        this.SydwGasListSearchArgs.num = pageSize
        this.SydwGasListSearchArgs.offset = 0
        this.searchGasData()
      }
    },
    // 页数改变
    async pageChange(page) {
      if (this.showTable) {
        this.args.offset = (page - 1) * this.args.num
        this.currentPage = page
        this.searchData()
      } else if (this.showDetail) {
        this.SydwGasListSearchArgs.offset = (page - 1) * this.args.num
        this.SydwGasListCurrentPage = page
        this.searchGasData()
      }
    },
    async setGasTypeChart(gasTypeData) {
      console.log(gasTypeData)
      const gasTypeChartOption = {
        chart: {
          plotBackgroundColor: null,
          plotBorderWidth: null,
          plotShadow: false,
          type: 'pie',
        },
        title: {
          text: '气瓶种类',
        },
        tooltip: {
          pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>',
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
              enabled: false,
            },
            showInLegend: true,
          },
        },
        series: [
          {
            name: '气瓶品种',
            colorByPoint: true,
            data: [...gasTypeData],
          },
        ],
      }
      setTimeout(() => {
        this.gasTypeChart = new Highcharts.chart('gas-type', gasTypeChartOption)
      }, 0)
    },

    async setMediaChart(mediaData) {
      const mediaChartOption = {
        chart: {
          plotBackgroundColor: null,
          plotBorderWidth: null,
          plotShadow: false,
          type: 'pie',
        },
        title: {
          text: '充装介质',
        },
        tooltip: {
          pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>',
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
              enabled: false,
            },
            showInLegend: true,
          },
        },
        series: [
          {
            name: '充装介质',
            colorByPoint: true,
            data: [...mediaData],
          },
        ],
      }
      setTimeout(() => {
        this.mediaChart = new Highcharts.chart('gas-media', mediaChartOption)
      }, 0)
    },

    async setRecordChart(recordData) {
      console.log(recordData)
      const recordChartOption = {
        chart: {
          type: 'column',
        },
        title: {
          text: '充装次数',
        },
        subtitle: {},
        xAxis: {
          type: 'category',
          labels: {
            rotation: 0, // 设置轴标签旋转角度
          },
          title: {
            text: '充装次数',
          },
        },
        yAxis: {
          min: 0,
          title: {
            text: '气瓶数',
          },
        },
        legend: {
          enabled: false,
        },
        series: [
          {
            name: '气瓶数',
            data: [...recordData],
          },
        ],
      }
      setTimeout(() => {
        this.recordChart = new Highcharts.chart('gas-record', recordChartOption)
      }, 0)
    },
  },
}
</script>

<style lang="less" scoped>
div.table {
  width: 100%;
  margin-left: 60px;
  margin-top: 30px;
  display: flex;
  flex-direction: row;
  // justify-content: center;
  div.container {
    width: 80%;
  }
}
div.page {
  width: 100%;
  display: flex;
  margin-top: 30px;
  flex-direction: row;
  justify-content: flex-end;
  position: relative;
  right: 300px;
}
div.detail-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  div.text-cards {
    width: 100%;
    display: flex;
    flex-direction: row;
    div.text-card {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      span {
        width: 98%;
        height: 40px;
        font-size: 17px;
        line-height: 40px;
        display: block;
        margin: 5px;
        text-align: center;
        font-weight: 700;
      }
      span.yello {
        color: black;
        background-color: #ffd966;
      }
      span.red {
        color: white;
        background-color: #ff0400;
      }
    }
  }
  div.charts {
    display: flex;
    flex-direction: row;
    margin-top: 20px;
  }
  div.table {
    div.container {
      margin-left:-50px;
      width: 100%;
    }
  }
}
</style>